<template>
  <div class="contact">
    <my-header>></my-header>
    <div id="page-bg">
      <!-- 地图组件 -->
      <mymap></mymap>
      <!--版心  -->
      <div id="exhibition">
        <div class="explain">
          <h2>
            中国国际青年旅舍
            <font style="vertical-align: super; font-size: 50%">®</font>
            总部
          </h2>
          <p>
            办公地址：广州市天河区体育西路103号维多利广场A塔3606室（地铁1/3号线，体育西路站E出口）
            <img src="../assets/img/what3words_logo.png" alt="三词地址" />
            <a
              href="https://map.what3words.com/%E9%B8%9F%E5%A3%B0.%E6%83%8A%E5%96%9C.%E7%90%86%E8%A7%A3"
              >鸟声.惊喜.理解</a
            >
          </p>
          <p>
            工作时间：周一至周五，上午9:00-12:30；下午14:00-18:00（周末及国家法定节假日休息）
          </p>
        </div>

        <!-- 主要内容 -->
        <div id="content">
          <!-- 左侧内容 -->
          <div class="content-left">
            <div class="contact-us">
              <div class="contact-type">
                <p>您可以通过以下方式联系我们</p>
                <br />
                <!-- 联系方式 -->
                <div class="contact-nav">
                  <!-- 写一个点击事件 -->
                  <ul class="clearfix">
                    <li :class="{ active: now === 0 }" @click="now = 0">
                      关于预定
                    </li>
                    <li :class="{ active: now === 1 }" @click="now = 1">
                      关于会员卡
                    </li>
                    <li :class="{ active: now === 2 }" @click="now = 2">
                      关于加盟
                    </li>
                    <li :class="{ active: now === 3 }" @click="now = 3">
                      关于合作
                    </li>
                    <li :class="{ active: now === 4 }" @click="now = 4">
                      其他问题
                    </li>
                  </ul>
                </div>
                <!-- 详细的list -->
                <!-- 第一个 -->
                <div class="contact-list">
                  <h3>关于预定</h3>
                  <table>
                    <tr>
                      <td>联系电话：</td>
                      <td>020-87513731转 103分机（普通话，粤语，English）</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>service@yhachina.com</td>
                    </tr>
                    <tr>
                      <td>传真号码：</td>
                      <td>020-38108668</td>
                    </tr>
                  </table>
                  <span>
                    温馨提示：如需取消订单，请直接登录您的个人账户，通过网站的 "
                    <a href="http://www.yhachina.com/web-member-orderQuery"
                      >旅舍订单</a
                    >
                    " 进行查询及操作。
                  </span>
                </div>
                <!-- 第二个 -->
                <div class="contact-list">
                  <h3>关于会员卡</h3>
                  <table>
                    <tr>
                      <td>联系电话：</td>
                      <td>020-87513731转 103分机（普通话，粤语，English）</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>service@yhachina.com</td>
                    </tr>
                    <tr>
                      <td>传真号码：</td>
                      <td>020-38108668</td>
                    </tr>
                  </table>
                </div>
                <!-- 第三个 -->
                <div class="contact-list">
                  <h3>关于加盟</h3>
                  <table>
                    <tr>
                      <td>联系电话：</td>
                      <td>020-87513731 转 105 分机（普通话，English）</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>office@yhachina.com</td>
                    </tr>
                  </table>
                  <span>
                    温馨提示：在与我们联系之前,请仔细阅读本站”旅舍加盟”栏目的信息,相信能解决您的大多数疑问。
                  </span>
                </div>
                <!-- 第四个:关于合作 -->
                <div class="contact-list">
                  <h3>关于合作</h3>
                  <p>
                    市场合作、会员优惠、会员卡代理商加盟、校园推广、活动赞助等，欢迎与我能联系。
                  </p>
                  <table>
                    <tr>
                      <td>联系电话：</td>
                      <td>020-87513731转 103分机（普通话，粤语，English）</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>service@yhachina.com</td>
                    </tr>
                    <tr>
                      <td>传真号码：</td>
                      <td>020-38108668</td>
                    </tr>
                  </table>
                </div>
                <!-- 第五个:其它问题 -->
                <div class="contact-list">
                  <h3>其他问题</h3>
                  <table>
                    <tr>
                      <td>联系电话：</td>
                      <td>020-87513731 转 103 分机（普通话，English）</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>office@yhachina.com</td>
                    </tr>
                    <tr>
                      <td>传真号码：</td>
                      <td>020-38108668</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧内容 -->
          <div class="content-right">
            <div class="block1">
              <a href="https://mp.weixin.qq.com/s/l8v67Q6t_6yCttHMIc5QKw?">
                <i></i>
                人才招聘
              </a>
            </div>
            <div class="block2">
              <router-link to="/yuding" class="block2-a" href="">
                <i></i>
                旅舍预定
              </router-link>
              <router-link to="/vip" class="block2-b" href="">
                <i></i>
                会员卡
              </router-link>
              <router-link to="/join" class="block2-c" href="">
                <i></i>
                旅舍加盟
              </router-link>
              <a class="block2-d" href="">
                <img src="../assets/img/block2-4.jpg" alt="" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer>></my-footer>
  </div>
</template>

<script>
import mymap from "@/components/mymap.vue"
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"

export default {
  data() {
    return {
      now: 0,
    }
  },
  //         mounted() {
  //         // 监听滚动事件
  //         window.addEventListener('scroll', this.onScroll, false)
  //         },
  //         methods: {
  //             onScroll() {
  //                 // 获取所有锚点元素
  //                 const navContents = document.querySelectorAll('.contact-nav~div')
  //                 // 所有锚点元素的 offsetTop
  //                 const offsetTopArr = []
  //                 navContents.forEach(item => {
  //                     offsetTopArr.push(item.offsetTop)
  //                 })
  //                 // 获取当前文档流的 scrollTop
  //                 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  //                 // 定义当前点亮的导航下标
  //                 let navIndex = 0
  //                 for (let n = 0; n < offsetTopArr.length; n++) {
  //                 // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
  //                 // 那么此时导航索引就应该是n了
  //                     if (scrollTop >= offsetTopArr[n]) {
  //                     navIndex = n
  //                     }
  //                 }
  //                  this.active = navIndex

  //             },
  //             // 跳转到指定索引的元素
  //             scrollTo(index) {
  //                 this.now++
  //                 // 获取目标的 offsetTop
  //                 // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
  //                 const targetOffsetTop = document.querySelector(`.contact-nav~div:nth-child(${index + 1})`).offsetTop
  //                 // 获取当前 offsetTop
  //                 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  //                 // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉
  //                 const STEP = 800
  //                 // 判断是往下滑还是往上滑
  //                 if (scrollTop > targetOffsetTop) {
  //                     // 往上滑
  //                     smoothUp()
  //                 } else {
  //                     // 往下滑
  //                     smoothDown()
  //                 }
  //                 // 定义往下滑函数
  //                 function smoothDown() {
  //                      // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
  //                      if (scrollTop < targetOffsetTop) {
  //           // 如果和目标相差距离大于等于 STEP 就跳 STEP
  //           // 否则直接跳到目标点，目标是为了防止跳过了。
  //           if (targetOffsetTop - scrollTop >= STEP) {
  //             scrollTop += STEP
  //           } else {
  //             scrollTop = targetOffsetTop
  //           }
  //           document.body.scrollTop = scrollTop
  //           document.documentElement.scrollTop = scrollTop
  //           // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
  //           requestAnimationFrame(smoothDown)

  // }
  //       }
  //       // 定义往上滑函数
  //       function smoothUp() {
  //         if (scrollTop > targetOffsetTop) {
  //           if (scrollTop - targetOffsetTop >= STEP) {
  //             scrollTop -= STEP
  //           } else {
  //             scrollTop = targetOffsetTop
  //           }
  //           document.body.scrollTop = scrollTop
  //           document.documentElement.scrollTop = scrollTop
  //           requestAnimationFrame(smoothUp)
  //         }
  //                 }

  //             }
  //         },

  components: { mymap, MyHeader, MyFooter },
}
</script>

<style lang="scss" scoped>
#page-bg {
  background-color: #f5f5f5;
  #exhibition {
    width: 1080px;
    margin: 0 auto;
    color: #333;
    position: relative;
    top: -60px;
    z-index: 200;
    .explain {
      background-color: #ffffff;
      padding: 30px;
      margin-bottom: 60px;
      box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
      border-radius: 5px;
      h2 {
        display: block;
        font-size: 30px;
        line-height: 100%;
        margin-bottom: 10px;
        // span {
        //     vertical-align: super;
        //     font-size: 50%;
        // }
      }
      p {
        font-size: 14px;
        img {
          vertical-align: middle;
        }
        a {
          color: #4b8fcc;
          vertical-align: middle;
          text-decoration: none;
          display: inline-block;
        }
      }
    }

    #content {
      position: relative;
      .content-left {
        width: 810px;
        overflow: hidden;
        display: inline;
        // float: left;
        .contact-us {
          font-size: 16px;
          color: #666666;
          padding-bottom: 240px;
          .contact-type {
            margin-bottom: 20px;

            p {
              margin-bottom: 15px;
            }

            .contact-nav {
              height: 57px;
              .nav-active {
                position: fixed;
                top: 0;
              }
              ul {
                width: 810px;
                border-bottom: 2px solid #e3e3e3;
                background-color: #fff;
                // margin: 0 0 25px;
                display: flex;
                justify-content: space-between;
                li {
                  width: 162px;
                  height: 55px;
                  line-height: 55px;
                  text-align: center;
                  cursor: pointer;
                  &.active {
                    box-shadow: 0 8px 0 -5px #87c524;
                    position: relative;
                  }
                  &.active:after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    overflow: hidden;
                    position: absolute;
                    bottom: -16px;
                    left: 50%;
                    margin-left: -8px;
                    border-width: 8px;
                    border-style: solid;
                    border-color: #87c524 transparent transparent transparent;
                  }
                }
                .clearfix::after {
                  content: "";
                  display: table;
                  clear: both;
                }
              }
            }
            .contact-list {
              line-height: 30px;
              background-color: #fff;
              padding: 20px 0;
              margin-bottom: 20px;
              width: 810px;
              h3 {
                display: block;
                line-height: 35px;
                color: #999;
                border-bottom: 1px solid #eee;
                padding-left: 20px;
              }
              p {
                height: 10px;
                color: #333;
                padding: 15px 0 0 20px;
                line-height: 10px;
                font-weight: bolder;
              }

              table {
                margin: 15px 0 0 20px;
                tr {
                  td {
                    color: #666;
                  }
                }
              }
              span {
                display: block;
                color: #f7941c;
                margin: 15px 0 0 20px;
                a {
                  text-decoration: none;
                  color: #551a8b;
                }
              }
            }
          }
        }
      }
      .content-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 240px;
        height: 483px;
        // background-color: #551a8b;
        .block1 {
          a {
            display: block;
            height: 120px;
            background-color: #fff;
            color: #333;
            font-size: 18px;
            line-height: 120px;
            margin-bottom: 10px;
            text-decoration: none;
            i {
              display: inline-block;
              width: 60px;
              height: 60px;
              background-image: url(../assets/img/app_z.png);
              background-position: 0px -312px;
              vertical-align: middle;
              margin: 0 20px 0 35px;
            }
          }
        }
        .block2 {
          a {
            display: block;
            text-decoration: none;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            height: 80px;
            line-height: 80px;
            margin-bottom: 1px;
            background-image: url(../assets/img/exhibition-r-icon4.png);
            background-repeat: no-repeat;
            background-position: right 20px center;
            border-radius: 5px;
            &.block2-a {
              background-color: #87c524;
              i {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-image: url(../assets/img/app_z.png);
                background-position: -389px -422px;
                vertical-align: middle;
                margin: 0 10px 0 20px;
              }
            }
            &.block2-b {
              background-color: #f7941c;
              i {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-image: url(../assets/img/app_z.png);
                background-position: -419px -422px;
                vertical-align: middle;
                margin: 0 10px 0 20px;
              }
            }
            &.block2-c {
              background-color: #4b8fcc;
              i {
                display: inline-block;
                width: 30px;
                height: 30px;
                background-image: url(../assets/img/app_z.png);
                background-position: -476px -60px;
                vertical-align: middle;
                margin: 0 10px 0 20px;
              }
            }
            &.block2-d {
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>
